<!-- 数据分析 -->
<template>
  <div class="newTest">
    <!-- 水质分析 -->
    <div class="dataChartCnt">
      <div class="searchBox">
        <el-form
          label-position="top"
          inline
          :model="searchForm"
          size="mini"
          style="max-height: 100px;"
        >
          <el-form-item>
            <p slot="label" class="miniLabel">时间段</p>
            <el-date-picker
              v-model="waterQualityDatePicker"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <p class="searchBtns">
              <el-button type="success" class="greenBtn" @click="getChartsData">确定</el-button>
            </p>
          </el-form-item>
        </el-form>
      </div>
      <div class="evaluation">
        <div class="evaluationCard">
          <div class="cardTit">
            <span>水质达标情况分析</span>
          </div>
          <div class="chartBox" v-loading="waterLoading">
            <div id="qualityAnalysisChart" class="chartBox"></div>
          </div>
        </div>
        <div class="evaluationCard">
          <div class="cardTit">
            <span>超标站点数</span>
          </div>
          <div class="chartBox" v-loading="factorLoading">
            <div id="overStandChart" class="chartBox"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import common from "@/plugins/common";
import myPaging from "@/components/myPaging.vue";
import tableList from "@/components/tableList.vue";
import { waterRate} from "@/http/api";
export default {
  data() {
    return {
      searchForm:{},
      factor: {},
      water: {},
      waterLoading: false,
      factorLoading: false,
      waterPerlodList: {},
      detailChart: null,
      waterQualityDatePicker: [],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    this.waterQualityDatePicker[0] = common.changeDateToString(
      new Date(new Date().getTime() - 518400000)
    );
    this.waterQualityDatePicker[1] = common.changeDateToString(new Date());
    this.getChartsData();
  },
  methods: {
    // 筛选获取各类型初始值
    async getChartsData() {
      let params = {
        startTime: this.waterQualityDatePicker[0] + " 00:00:00",
        endTime: this.waterQualityDatePicker[1] + " 23:59:59",
      };
      this.waterLoading = true;
      this.factorLoading = true;
      await waterRate(params).then((res) => {
        this.water = res.data.water;
        res.data.factorMessage.forEach((item) => {
          if (Object.keys(res.data.factor).includes(item.name)) {
            this.factor[item.name] = res.data.factor[item.name];
          }
        });
        this.waterLoading = false;
        this.factorLoading = false;
        this.initQualityAnalysisOption();
        this.initOverStandOption();
      });
    },

    /**
     *  水质分析
     */
    //超标站点数
    initOverStandOption() {
      let overStandChart = this.$echarts.init(
        document.getElementById("overStandChart")
      );
      let qualityExceedNumOption = {
        color: ["#ef9887"],
        grid: {
          top: 40,
          left: 40,
          right: 10,
          bottom: 70,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: (value) => value.split("").join("\n"),
            },
            data: Object.keys(this.factor).map((item) => item),
          },
        ],
        yAxis: [
          {
            name: "个",
            type: "value",
            // max: 8,
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "超标站点数",
            type: "bar",
            barWidth: 20,
            data: Object.values(this.factor).map((item) => item.length),
          },
        ],
      };
      overStandChart.setOption(qualityExceedNumOption);
    },
    //初始化水质达标情况分析
    initQualityAnalysisOption() {
      let myChart = this.$echarts.init(
        document.getElementById("qualityAnalysisChart")
      );

      // 指定图表的配置项和数据
      var option = {
        color: ["#ff6341", "#2ac4e0"],
        grid: {
          top: 20,
          left: 40,
          right: 10,
          bottom: 80,
        },
        tooltip: {
          trigger: "axis",
          // formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%',
          formatter: (params) => {
            let str = `${params[0].name}<br />`;
            for (let i = 0; i < params.length; i++) {
              str += `<span style="display:inline-block;vertical-align: middle;border-radius: 50%;width:12px;height:12px;background: ${
                params[i].color.colorStops[0].color
              };"></span> ${params[i].seriesName}: ${params[i].value.toFixed(
                2
              )} % <br />`;
            }
            return str;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: [
          {
            type: "category",
            data: Object.keys(this.water).map((item) => item),
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: (value) => value.split("").join("\n"),
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 100,
            axisLabel: {
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "达标率",
            type: "bar",
            barWidth: 20,
            stack: "1",
            data: Object.values(this.water).map((item) => item.up * 100),
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: "#5BB0F0",
                  },
                  {
                    offset: 1,
                    color: "#5DD3EC",
                  },
                ]),
              },
            },
          },
          {
            name: "超标率",
            type: "bar",
            barWidth: 20,
            stack: "1",
            data: Object.values(this.water).map((item) => item.exceed * 100),
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: "#ef9887",
                  },
                  {
                    offset: 1,
                    color: "#FF8282",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.el-dialog__footer {
  display: flex;
  justify-content: center;
}

.newTest {
  min-height: 100%;
}

.newTest .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
  background: #ffffff;
  margin-bottom: 20px;
  padding-left: 30px;
}

.newTest .title::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.searchBox {
  padding: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  display: flex;
}

.searchBox .miniLabel {
  line-height: 0;
}

.searchBtns {
  margin-top: 19px;
}

.el-dialog {
  z-index: 3000 !important;
}
.noData {
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #909399;
}
/* 水质分析 */
.qualityEvaluationMini .title {
  line-height: 40px;
  font-size: 14px;
  color: #0063ed;
}

.qualityEvaluationMini .qualityAnalysisSearch {
  padding-bottom: 12px;
}

.qualityEvaluationMini .evaluationCard {
  padding: 8px 8px 0;
  margin-bottom: 8px;
  box-shadow: 1px 1px 5px 0px rgba(75, 75, 75, 0.2);
  background-color: #fff;
}

.evaluationCard .cardTit {
  position: relative;
  padding-left: 8px;
  font-size: 14px;
  line-height: 28px;
  color: #535353;
}

.evaluationCard .cardTit::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  background: #0063ed;
  top: 50%;
  margin-top: -8px;
  left: 0;
}

.evaluationCard .chartBox {
  width: 100%;
  height: 200px;
}
.evaluation{
  background: #fff;
  padding: 20px;
}
</style>
